<template>
    <div>
        <div class="page-title">HSE审核组设置</div>
        <div class="page-content">
            <el-row>
                <el-form
                :inline="true"
                :model="filterQuery">
                    <el-form-item
                    label="年：">
                        <el-date-picker
                        v-model="filterQuery.taskDate"
                        format="yyyy"
                        value-format="yyyy"
                        type="year"
                        placeholder="请选择年限"
                        style="width: 180px"
                        clearable>
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item
                    label="轮次：">
                        <el-input style="width: 160px" v-model="filterQuery.round" placeholder="请输入搜索轮次" clearable></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" style="width: 100px" icon="el-icon-search" @click="handleSearch">查 询</el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" style="width: 120px" icon="el-icon-edit" @click="createAuditGroup">新建审核组</el-button>
                    </el-form-item>
                </el-form>
            </el-row>
            <el-row>
                <el-table
                :data="tableData"
                :header-cell-style="{'text-align': 'center'}"
                :cell-style="{'text-align': 'center'}"
                height="500px"
                style="width: 100%"
                border>
                    <el-table-column
                    label="序号"
                    type="index"
                    min-width="80px">
                    </el-table-column>
                    <el-table-column
                    label="审核年限"
                    prop="groupYear"
                    min-width="100px">
                    </el-table-column>
                    <el-table-column
                    label="审核轮次"
                    prop="round"
                    min-width="100px">
                    </el-table-column>
                    <el-table-column
                    label="审核组"
                    prop="auditGroupName"
                    min-width="100px">
                    </el-table-column>
                    <el-table-column
                    label="审核类别"
                    prop="groupType"
                    min-width="100px">
                    </el-table-column>
                    <el-table-column
                    label="审核区域"
                    prop="companyName"
                    min-width="200px"
                    :show-overflow-tooltip="true">
                    </el-table-column>
                    <!-- <el-table-column
                    label="审核主题"
                    prop="members"
                    min-width="200px"
                    :show-overflow-tooltip="true">
                    </el-table-column> -->
                    <el-table-column
                    label="操作"
                    min-width="150px">
                        <template slot-scope="scope">
                            <el-button type="warning" size="mini" icon="el-icon-edit-outline" @click="editAuditCompany(scope.row)">修改</el-button>
                            <el-button type="danger" size="mini" icon="el-icon-delete" @click="deleteAuditGroup(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="pagination-base">
                <el-pagination
                background
                @current-change="handlePageChange"
                layout="total, prev, pager, next"
                :page-size="10"
                :total="pageTotal"></el-pagination>
                </div>
            </el-row>

            <!-- 新建审核组弹窗 -->
            <el-dialog
            title="新建审核组"
            :visible.sync="newGroupDialogVisible">
            <el-form
            label-width="100px"
            label-position="right"
            v-model="newGroupData">
            <el-row>
                <el-col :span="10">
                    <el-form-item
                    label="任务名：">
                        <el-input
                        v-model="auditTaskName"
                        style="width: 150px"
                        readonly></el-input>
                        <!-- <el-select
                        v-model="newGroupData.auditTaskID"
                        ref="auditTaskRefs"
                        placeholder="请选择任务"
                        style="width: 150px"
                        clearable
                        @change="getAuditTaskID()">
                            <el-option
                            v-for="item in auditTask"
                            :key=item.auditTaskID
                            :label="item.taskName"
                            :value="item.auditTaskID">
                            </el-option>
                        </el-select> -->
                    </el-form-item>
                </el-col>
                <el-col :span="10">
                    <el-form-item
                    label="任务轮次：">
                        <el-input
                        placeholder="请选择任务"
                        v-model="round"
                        style="width: 180px"
                        readonly></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="10">
                    <el-form-item
                    label="组名：">
                        <el-input 
                        placeholder="请输入审核组名" 
                        v-model="newGroupData.groupName"
                        style="width: 150px"
                        clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="10">
                    <el-form-item
                    label="审核年度：">
                        <el-input
                        v-model="newGroupData.groupYear"
                        style="width: 180px"
                        readonly
                        ></el-input>
                        <!-- <el-date-picker
                        type="year"
                        format="yyyy"
                        value-format="yyyy"
                        v-model="newGroupData.groupYear"
                        placeholder="请选择审核组年限"
                        style="width: 180px"
                        clearable>
                        </el-date-picker> -->
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="10">
                    <el-form-item
                    label="类别：">
                        <el-select 
                        :multiple="true"
                        v-model="newGroupData.groupType"
                        placeholder="请选择审核类别" 
                        style="width: 150px"
                        clearable>
                            <el-option
                            v-for="item in auditGroupType"
                            :key=item.name
                            :label="item.name"
                            :value="item.name">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="10">
                    <el-form-item
                    label="组长：">
                        <el-select
                        placeholder="请选择审核组长"
                        value-key="checkPersonID"
                        v-model="groupLeader"
                        style="width: 180px"
                        @change="getGroupLeader"
                        filterable
                        clearable>
                            <el-option
                            v-for="item in auditGroupLeader"
                            :key="item.checkPersonID"
                            :label="item.checkPersonName"
                            :value="item"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-form-item
            label="组员：">
                <el-select 
                :multiple="true"
                placeholder="请选择组内成员"
                v-model="groupMembers"
                value-key="checkPersonID"
                @change="getGroupMembers"
                filterable
                style="width: 80%"
                clearable>
                    <el-option
                    v-for="item in auditGroupMembers"
                    :key=item.checkPersonID
                    :label="item.checkPersonName"
                    :value="item"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item
            label="审核区域：">
                <!-- <treeselect
                :multiple="true"
                :options="companytree"
                value-consists-of="LEAF_PRIORITY"
                placeholder="请选择审核区域"
                v-model="companyCode"
                style="width: 80%"
                clearable
                ></treeselect> -->
                <el-input
                v-model="newGroupData.companyName"
                placeholder="请输入审核区域"
                style="width: 80%"
                clearable></el-input>
            </el-form-item>
            </el-form>
                <span slot="footer">
                    <el-button @click="newGroupDialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="handleNewAuditGroup">确 定</el-button>
                </span>
            </el-dialog>

            <!-- 修改审核区域 -->
            <el-dialog
            title="修改审核区域"
            :visible.sync="editAuditCompanyDialogVisible">
                <el-form
                label-width="100px"
                label-position="right"
                v-model="editAuditGroup">
                    <el-form-item
                    label="审核组：">
                        <el-input
                        v-model="editAuditGroupName"
                        style="width: 120px"
                        disabled></el-input>
                    </el-form-item>
                    <el-form-item
                    label="审核组组长：">
                        <el-select
                        placeholder="请选择组长"
                        v-model="editGroupLeaderName"
                        value-key="checkPersonID"
                        @change="updateGroupLeader"
                        style="width: 80%"
                        filterable
                        clearable>
                            <el-option
                            v-for="item in auditGroupLeader"
                            :key=item.checkPersonID
                            :label="item.checkPersonName + '(' + item.companyName + ')'"
                            :value="item"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item
                    label="审核组成员：">
                        <el-select 
                        placeholder="请选择组内成员"
                        v-model="editMembers"
                        @change="getEditMembers"
                        value-key="checkPersonID"
                        :multiple="true"
                        filterable
                        style="width: 80%"
                        clearable>
                            <el-option
                            v-for="item in auditGroupMembers"
                            :key=item.checkPersonID
                            :label="item.checkPersonName + '(' + item.companyName + ')'"
                            :value="item"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item
                    label="审核区域：">
                        <!-- <treeselect
                        :multiple="true"
                        :options="companytree"
                        value-consists-of="LEAF_PRIORITY"
                        placeholder="请选择审核区域"
                        v-model="editCompanyCode"
                        style="width: 80%"
                        clearable
                        ></treeselect> -->
                        <el-input
                        placeholder="请输入审核区域"
                        v-model="editAuditGroup.companyNames"
                        style="width: 80%"
                        clearable></el-input>
                    </el-form-item>
                </el-form>
                <span slot="footer">
                    <el-button @click="editAuditCompanyDialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="submitEditAuditCompany">确 定</el-button>
                </span>
            </el-dialog>
        </div>
    </div>
</template>

<script>
import { CreateHSEAuditGroup,
         GetHSEAuditGroup,
         GetHSEAuditGroupLeader,
         GetHSEGroupMembers,
        //  GetHSEAuditTaskData,
         UpdateHSEAuditGroupCompany,
         DeleteAuditGroup } from '../../../services/hseAudit'
import { GetDictionary } from '../../../services/dictionary'
// import{ GetCompany } from '../../../services/gettreedata'

export default {
    data() {
        return {
            filterQuery: {
                taskDate: '',
                round: '',
                auditTaskID: ''
            },
            hseAuditGroup: [],
            tableData: [],
            // hseAuditTaskData: {
            //     taskDate: '',
            //     round: '',
            //     num: '0',
            //     size: '',
            // },
            editAuditGroup: {
                companyNames: '',
                members: []
            },
            groupLeader: '',
            groupLeaderData: {},
            groupMembers: [],
            // companytree: [],
            auditGroupType: [],
            auditGroupLeader: [],
            auditGroupMembers: [],
            auditTask: [],
            // companyName: '',
            editCompanyName: '',
            editMembers: [],
            round: '',
            auditTaskName: '',
            newGroupData: {
                auditTaskID: '',
                groupName: '',
                groupYear: '',
                groupType: [],
                companyName: '',
                members: []
            },
            editAuditGroupID: '',
            editAuditGroupName: '',
            newGroupDialogVisible: false,
            editAuditCompanyDialogVisible: false,
            pageTotal: null,
            editGroupLeader: {},
            editGroupLeaderName: '',
            rowData: {},
            employee: {
                num: 0,
                size: 99
            }
        }
    },
    mounted() {
        this.handleSearch()
    },
    methods: {
        handleSearch() {
            this.tableData = []
            this.hseAuditGroup = []
            this.rowData = JSON.parse(this.$route.query.row)
            this.filterQuery.auditTaskID = this.rowData.auditTaskID
            GetHSEAuditGroup(this.filterQuery).then(res => {
                var j = 1
                for(var i in res.data) {
                    if(j != res.data.length){
                        if(res.data[i].auditGroupID != res.data[j].auditGroupID){
                            this.hseAuditGroup.push({
                                auditTaskID: res.data[i].auditTaskID,
                                auditGroupID: res.data[i].auditGroupID,
                                auditGroupName: res.data[i].auditGroupName,
                                companyName: res.data[i].companyName,
                                companyCode: res.data[i].companyCode,
                                groupType: res.data[i].groupType,
                                groupYear: res.data[i].groupYear,
                                round: res.data[i].round,
                                members: []
                            })
                        }
                    }
                    else {
                        this.hseAuditGroup.push({
                            auditTaskID: res.data[i].auditTaskID,
                            auditGroupID: res.data[i].auditGroupID,
                            auditGroupName: res.data[i].auditGroupName,
                            companyName: res.data[i].companyName,
                            companyCode: res.data[i].companyCode,
                            groupType: res.data[i].groupType,
                            groupYear: res.data[i].groupYear,
                            round: res.data[i].round,
                            members: []
                        })
                    }
                    j = j + 1
                }
                res.data.map(member => {
                    this.hseAuditGroup.map(item => {
                        if(item.auditGroupID == member.auditGroupID){
                            item.members.push({
                                staffID: member.staffID,
                                staffName: member.staffName,
                                groupRole: member.groupRole,
                                auditTopic: member.auditTopic
                            })
                        }
                    })
                })
                this.pageTotal = this.hseAuditGroup.length
                if(this.hseAuditGroup.length <= 10){
                    this.tableData = this.hseAuditGroup
                }
                else{
                    this.tableData = this.hseAuditGroup.slice(0,10)
                }
            })
            // this.hseAuditTaskData.size = 100
            // GetHSEAuditTaskData(this.hseAuditTaskData).then(res => {
            //     this.auditTask = res.data.list
            // }).catch(() => {
            //     this.$message.error('获取审核任务失败！');
            // })
            GetHSEAuditGroupLeader(this.employee).then(res => {
                console.log('组长',res.data);
                this.auditGroupLeader = res.data.list
            })
            GetHSEGroupMembers(this.employee).then(res => {
                console.log('组员',res.data);
                this.auditGroupMembers = res.data.list
            })
            
        },
        createAuditGroup() {
            this.newGroupData.auditTaskID = this.rowData.auditTaskID
            this.auditTaskName = this.rowData.taskName
            this.round = this.rowData.round
            this.newGroupData.groupYear = this.rowData.taskDate
            GetDictionary({name: 'QHSEE组类别'}).then(res => {
                this.auditGroupType = res.data
            }).catch(() => {
                this.$message.error('获取HSE审核类别失败！')
            })
            this.newGroupDialogVisible = true
        },
        // getAuditTaskID() {
        //     this.auditTask.map(item => {
        //         if(item.auditTaskID == this.newGroupData.auditTaskID) {
        //             this.round = item.round
        //         }
        //     })
        // },
        getGroupLeader() {
            this.groupLeaderData = {
                auditGroupName: this.newGroupData.groupName,
                staffID: this.groupLeader.checkPersonID,
                staffName: this.groupLeader.checkPersonName,
                groupRole: '组长',
                hseAuditSystemCodes: '',
                auditTopic: '',
            }
        },
        getGroupMembers() {
            this.newGroupData.members = []
            for(var i in this.groupMembers) {
                this.newGroupData.members[i] = {
                    auditGroupName: this.newGroupData.groupName,
                    staffID: this.groupMembers[i].checkPersonID,
                    staffName: this.groupMembers[i].checkPersonName,
                    groupRole: '组员',
                    hseAuditSystemCodes: '',
                    auditTopic: '',
                }
            }
        },
        editAuditCompany(row) {
            this.editMembers = []
            this.editGroupLeader = {}
            this.editAuditCompanyDialogVisible = true
            this.editAuditGroupID = row.auditGroupID
            this.editAuditGroupName = row.auditGroupName
            this.editAuditGroup.companyNames = row.companyName
            row.members.map(item => {
                if(item.groupRole == '组长') {
                    this.editGroupLeaderName = item.staffName
                    this.editGroupLeader = {
                        checkPersonID: item.staffID,
                        checkPersonName: item.staffName
                    }
                }
                else{
                    this.editMembers.push({
                        checkPersonID: item.staffID,
                        checkPersonName: item.staffName
                    })
                    this.getEditMembers()
                }
            })
        },
        getEditMembers() {
            this.editAuditGroup.members = []
            for(var i in this.editMembers) {
                this.editAuditGroup.members[i] = {
                    auditGroupID: this.editAuditGroupID,
                    auditGroupName: this.editAuditGroupName,
                    staffID: this.editMembers[i].checkPersonID,
                    staffName: this.editMembers[i].checkPersonName,
                    groupRole: '组员',
                    hseAuditSystemCodes: '',
                    auditTopic: '',
                }
            }
        },
        handleNewAuditGroup() {
            this.newGroupData.members[this.newGroupData.members.length] = this.groupLeaderData
            this.newGroupData.groupType = this.newGroupData.groupType.join(',')
            CreateHSEAuditGroup(this.newGroupData).then(() => {
                this.$message.success('创建审核组成功！')
                this.newGroupDialogVisible = false
                this.handleSearch()
                this.newGroupData = {}
                this.groupMembers = []
                this.groupLeader = []
                this.round = ''
            }).catch((err) => {
                this.$message.error(err)
            })
        },
        submitEditAuditCompany() {
            // if(this.editAuditGroupName != ''){
                this.editAuditGroup.members.push({
                    auditGroupID: this.editAuditGroupID,
                    auditGroupName: this.editAuditGroupName,
                    staffName: this.editGroupLeader.checkPersonName,
                    groupRole: '组长',
                    staffID: this.editGroupLeader.checkPersonID,
                    hseAuditSystemCodes: '',
                    auditTopic: ''
                })
            // }
            UpdateHSEAuditGroupCompany(this.editAuditGroup).then(() => {
                this.$message.success('修改成功！')
                this.editAuditGroup = {}
                this.editGroupLeader = {}
                this.editGroupLeaderName = ''
                this.editAuditCompanyDialogVisible = false
                this.handleSearch()
            }).catch(() => {
                this.$message.error("修改失败！")
            })
        },
        handlePageChange(val) {
            var pageStart = (val-1) * 10
            var pageEnd= val * 10
            this.tableData = this.hseAuditGroup.slice(pageStart,pageEnd)
        },
        deleteAuditGroup(row) {
            DeleteAuditGroup({auditGroupID: row.auditGroupID}).then(() => {
                this.$message.success('删除成功！')
                this.handleSearch()
            }).catch(err => {
                this.$message.error(err)
            })
        },
        updateGroupLeader(value) {
            this.editGroupLeader = value
        }
    }
}
</script>

<style>
.el-table th {
    display: table-cell ! important;
}
</style>